<template>
  <div class="serviceItem" :model="serviceInfo">
    <div v-if="serviceInfo.serviceId">
      <el-image :src="baseUrl+serviceInfo.picUrl" />
      <span>{{ serviceInfo.serviceName }}</span>
    </div>
    <div v-else>
      <el-button type="text" @click="addService">添加服务</el-button>
    </div>
    <select-service-dialog ref="dialog" @select="select" />
  </div>

</template>

<script>

import SelectServiceDialog from '@/components/SelectServiceDialog'

export default {
  name: 'ServiceItem',
  components: { SelectServiceDialog },
  props: {
    index: {
      type: Number,
      required: true
    },
    num: {
      type: Number,
      required: true
    },
    service: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      serviceInfo: {
        serviceId: '',
        picUrl: '',
        serviceName: ''
      }
    }
  },
  methods: {

    getData() {
      const vm = this
      return vm.serviceInfo
    },
    select(service) {
      const vm = this
      if (service) {
        console.log(service)
        vm.serviceInfo.serviceId = service.id
        vm.serviceInfo.serviceName = service.name
        vm.serviceInfo.picUrl = JSON.parse(service.serviceImage)[0]
        vm.serviceInfo.cost = service.costPrice
        vm.serviceInfo.orginalPrice = service.originalPrice
        vm._value = service
        vm.$emit('change', vm._value)
        vm.$emit('getExtraSpecInfo', vm.index, vm.serviceInfo, vm.num)
        vm.$forceUpdate()
      }
    },
    addService() {
      const vm = this
      vm.$refs.dialog.show()
    }
  }
}
</script>

<style lang="scss" scoped>
.serviceItem {
  .ele-dialog-title{
    text-align: left;
  }
  .ele-div-keysearch {
    display: flex;
    justify-content: space-between;
    .search-left {
      width: 50%;
      ::v-deep.el-select,
      .ele-input,
      .el-button {
        margin-left: 15px;
      }
      ::v-deep.el-select {
        width: 100px;
      }
    }
    .search-flex {
      display: flex;
      ::v-deep.el-button {
        margin-left: 15px;
      }
    }
  }
  .ele-table {
    width: 100%;
    margin-top: 40px;
    .ele-div-footer {
      display: flex;
      justify-content: space-between;
      margin: 50px 0px 100px 0px;
      .footer-left {
        ::v-deep.el-button {
          width: 100px;
          margin: 0px;
        }
      }
    }
  }
}

</style>
